<script setup lang="ts">

</script>
<template>
    <view class="hot-topic">
        <view class="hot-title">热门话题</view>
        <view class="topic-box">
            <view v-for="(item, index) in 6" :key="index" class="list-box">
                <view class="text-icon">#</view>
                <view class="text">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.hot-topic {
    display: flex;
    margin: 0 64px;

    .topic-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 9rpx 0;
        background: #f3b600;

        .list-box {
            display: flex;
            align-items: center;
            height: 58rpx;
            padding: 0px 5.5px;
            margin: 5px 0px;
            font-size: 13px;
            font-weight: 400;
            background: #fffefe;
            border-radius: 20px;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

            .text-icon {
                width: 16px;
                height: 17px;
                color: #f3b600;
                text-align: center;
                font-weight: 950;
                background: #000000;
                border-radius: 50%;
            }

            .text {
                margin-left: 10rpx;
            }
        }

        .list-box:last-child {
            justify-self: flex-start;
        }
    }
}
</style>